<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.header_19')}}</h2>
            <div class="personCon el-container">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_214')}}</h2>
                    <div class="resetpsdbar">
                        <p class="title">{{$t('l.personal_215')}}</p>
                        <div class="putgroup padbtm">
                            <input class="comput small" type="password" v-model="password" :placeholder="$t('l.personal_216')">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_217')}}</p>
                        <div class="putgroup padbtm">
                            <input class="comput small" type="password" v-model="repassword" :placeholder="$t('l.personal_218')">
                            <p class="errortext"></p>
                        </div>
                        <a class="btn changebtn" @click="checkpwd">{{$t('l.advert_about23')}}</a>
                    </div>
                </div>
                <div class="rightpanel el-main">
                    <div class="tipbox">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">1. {{$t('l.personal_219')}}</p>
                    </div>
                </div>
            </div>
        </div>

        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="changePwd">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="changePwd">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--谷歌校验-->
        <div class="popWraper" v-show="ischeck && status=='ga'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_47')}}</p>
                        <input class="comput small" v-model="verifyCode" :placeholder="$t('l.personal_44')" style="width:100%;">
                        <a class="btn allcell martop30" @click="changePwd">{{$t('l.personal_186')}}</a>
                        <p class="changemode">{{$t('l.add_25')}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .tipbox{
            height:455px;
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid #2D8DFE;
            padding:34px 20px;
            box-sizing: border-box;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:20px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
    }
}
</style>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import md5 from 'js-md5';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    created(){
        this.intro = this.$store.state.userintro;
        let intro = this.$store.state.userintro;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
    },
    data(){
        return{
            verifyCode:"",
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            account:"",
            intro:"",
            password:'',
            repassword:''
        }
    },
    methods:{
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }, 
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCode({
                email:that.account,
                type:"M"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.$store.state.userintro.phoneArea,
                phone:that.account,
                type:"M"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //重置密码
        async changePwd(){
            let that = this;
            let res = await api.resetPwd({
                password:md5(that.password),
                verifyCode:that.verifyCode
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.add_84'));
                that.$router.push({
                    path: "/safeSetting"
                });
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        checkpwd(){
            if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/.test(this.password)){
                this.$layer.msg(that.$t('l.personal_220'));
                return;
            }else if(this.password!==this.repassword){
                this.$layer.msg(that.$t('l.personal_221'));
                return;
            }else{
                this.ischeck = true;
            }
        }
    },
    mounted(){
        
    }
}
</script>


